<template >
	<div class="contain-box">
		<div class="box-header">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>库存管理</el-breadcrumb-item>
				<el-breadcrumb-item to="/inventoryTransfer" replace>库存盘点</el-breadcrumb-item>
				<el-breadcrumb-item>新增调拨</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="box-body">
			<div class="body-top">库存调拨单</div>
			<div class="body-set">
				<el-select  placeholder="请选择出库仓库"  size="small" style="width: 200px;margin-right: 10px">
					<el-option v-for="item in importExport" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-select  placeholder="请选择入库仓库"  size="small" style="width: 200px;margin-right: 10px">
					<el-option v-for="item in importExport" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-date-picker
						size="small"
						type="date"
						placeholder="期望调拨日期">
				</el-date-picker>
			</div>
			<div class="body-add">
				<el-button type="primary" style="background-color: #1abc9c" size="small" @click="dialogTable = true">关联商品</el-button>
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						size="small"
						border
						style="width: 100%">
					<el-table-column
							type="index"
							label="序号"
							width="100px"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="name"
							label="商品名称"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="name"
							label="规格型号"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="name"
							label="单位"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="name"
							label="剩余库存"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="name"
							label="调拨数量"
							align="center"
					>
					</el-table-column>
					<el-table-column
							label="操作"
							align="center"
					>
						<template slot-scope="scope">
							<el-button size="small" type="text" >删 除</el-button>
						</template>
					</el-table-column>
				
				</el-table>
			</div>
			<div class="body-set">
				<el-input  placeholder="请输入单据备注" type="textarea" style="width: 50%" :rows="5" resize="none" size="small"></el-input>
			</div>
		</div>
		<div class="box-submit">
			<div class="submit-left">
			</div>
			<div>
				<el-button size="small">取 消</el-button>
				<el-button type="primary" size="small" style="background-color: #1abc9c">提交审核</el-button>
			</div>
		</div>
		<el-dialog
				title="关联商品"
				:visible.sync="dialogTable"
				width="50%"
		>
			<div>
				<el-input placeholder="请输入商品名称/商品编号" style="width: 50%" size="small">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
				<el-table
						:data="tableData"
						size="mini"
						tooltip-effect="dark"
						style="width: 100%;margin-top: 20px"
						@selection-change="handleSelectionChange" >
					<el-table-column
							align="center"
							type="selection"
							width="55">
					</el-table-column>
					<el-table-column
							prop="name"
							label="商品分类"
							align="center"
					>
					</el-table-column>
					
					<el-table-column
							prop="name"
							label="商品名称"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="name"
							label="规格型号"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="name"
							label="计量单位"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="name"
							label="采购价格"
							align="center"
					>
					</el-table-column>
					<el-table-column
							prop="name"
							label="库存"
							align="center"
					>
					</el-table-column>
				</el-table>
				<div class="dialog-page">
					<el-pagination
							background
							:current-page="10"
							:page-sizes="[5, 10]"
							:page-size="100"
							layout="prev, pager, next"
							:total="400">
					</el-pagination>
				</div>
			</div>
			
			<span slot="footer" class="dialog-footer">
					<el-button @click="dialogTable = false" size="small">取 消</el-button>
					<el-button type="primary" @click="dialogTable = false" size="small" style="background-color: #1abc9c">确 定</el-button>
				  </span>
		</el-dialog>
	</div>
</template >

<script >
    export default {
        data(){
            return{
                dialogTable:false,
                importExport:[
                    {
                        id:1,
                        name:'全部'
                    },
                    {
                        id:2,
                        name:'销售退货入库'
                    },
                    {
                        id:3,
                        name:'采购入库'
                    },
                    {
                        id:4,
                        name:'调拨入库'
                    },
                ],
                tableData:[
                    {
                        name:'测试'
                    }
                ],
            }
        },
        methods:{
            handleSelectionChange(val) {
                console.log(val)
            },
        }
    }
</script >

<style scoped lang="less">
	.contain-box {
		width: 100%;
		height: 100%;
		/deep/.distpicker-address-wrapper {
			select {
				width: 32%!important;
				padding: 0px 10px !important;
				height: 35px !important;
				font-size: 12px !important;
				line-height: 35px !important;
				border-radius: 5px;
			}
		}
		.dialog-box{
			width: 100%;
		}
		.dialog-page{
			margin-top: 20px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
				background-color: #1abc9c;
			}
		}
		/deep/.el-dialog__body{
			padding: 10px 20px;
		}
		.box-header {
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}
		.box-body{
			width: 100%;
			border-radius: 5px;
			padding: 20px;
			box-sizing: border-box;
			box-shadow: 0 0 5px 0 #e4e4e4;
			.body-top{
				width: 100%;
				height: 50px;
				text-align: center;
				line-height: 50px;
				border-bottom: 1px solid #e4e4e4;
				font-size: 20px;
				color: #666;
			}
			.body-set{
				margin-top: 20px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
			.body-add{
				margin-top: 20px;
				width: 100%;
			}
			.body-table{
				margin-top: 20px;
				width: 100%;
			}
			.body-message{
				margin-top: 20px;
				width: 100%;
				.message-box{
					margin-top: 20px;
					display: flex;
					align-items: center;
					cursor: pointer;
					.message-img{
						margin-left: 20px;
						width: 20px ;
						height: 20px;
					}
					.message-son{
						margin-right: 15px;
						font-size: 14px;
					}
				}
			}
		}
		.box-submit{
			margin-top: 20px;
			width: 100%;
			border-radius: 5px;
			padding: 20px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0 0 5px 0 #e4e4e4;
			.submit-left{
				display: flex;
				font-size: 16px;
				p{
					margin-right: 20px;
					span{
						color: red;
						font-weight: bold;
					}
				}
			}
		}
	}
</style >
